<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myChart {
            width: 800px;
            height: 400px;
            border: 1px solid #f00;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="myChart"></div>
</body>
<script src="./echarts.min.js"></script>
<script>
    // 1. 获取dom元素
    const myChartDom = document.querySelector('.myChart')
    console.log(myChartDom);

    // 2. 将myChartDom初始化为一个Echart对象
    const myChart = echarts.init(myChartDom)

    // 3. 配置图表对象
    const config = {

        // 标题组件
        title: {
            text: '折线图', // 标题名称
            subtext: '数据可视化',  // 副标题

        },

        // 提示组件
        tooltip: {

        },

        // x轴-横轴
        xAxis: {
            // 放置的数据名字
            data: [
                '前端', '大数据', 'UI', '测试', '产品'
            ]
        },

        // y轴-竖轴
        yAxis: {
            min: 0,  //最小刻度
            max: 30000  //最大 刻度
        },

        // 通过series生成数据对图的映射关系,重点
        series: [
            // 生成柱形图
            {
                // 类型：‘柱形’
                type: 'line',
                // 显示出来的数据
                data: [14000, 16000, 18000, 20000, 22000],
                color: '#f00'
            }
        ]
    }
    //第四步：渲染图表数据
    myChart.setOption(config)

</script>

</html>